<template>
    <div>
      <el-dialog
          title="修改用户信息"
          :visible.sync="updateDialogVisible"
          width="30em"
          :before-close="handleClose"
          @open="initialize">
          <el-form :model="users" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="用户名">
                  <el-input v-model="username" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                  <el-input v-model="users.email"></el-input>
              </el-form-item>
              <el-form-item label="手机号" prop="mobile">
                  <el-input v-model="users.mobile"></el-input>
              </el-form-item>
          
          </el-form>
          <span slot="footer" class="dialog-footer">
                  <el-button @click="offuser">取 消</el-button>
                  <el-button type="primary" @click="yesUser">确 定</el-button>
              </span>
      </el-dialog>
      <!-- <template>
          <el-button :plain="true" @click="open2">成功</el-button>
      </template> -->
    </div>
  </template>
  
  <script>
  export default {
    name:'updateUser',
      data() {
          // 验证邮箱E
          var checkEmail = (rule, value, callback) => {
              var reg1 = /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/
              if (reg1.test(value)||!value) {
                  return callback()
              } 
              callback(new Error('邮箱格式不正确'))
              
          }
          // 验证电话
          var checkMobile = (rule, value, callback) => {
              var reg2 =  /^1[3-9]\d{9}$/
              if (reg2.test(value)||!value) {
                 return callback()
              }
              callback(new Error('手机号码格式不正确'))
              
          }
          return {
              users:{
                  id:'500',
                  email:'adsfad@qq.com',
                  mobile:'17365644444',
              },
              username:'admin',
              //防止失败的时候重复点击确定按钮
              num1:true,
              rules:{ 
                  password: [
                      { required: true, message: '请输入密码', trigger: 'blur' },
                      { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
                  ],
                  email:[
                      { required: false, message: '请输入邮箱', trigger: 'blur' },
                      {validator: checkEmail, trigger:'blur'}
                  ],
                  mobile:[
                      { required: false, message: '请输入手机号', trigger: 'blur' },
                      {validator: checkMobile, trigger:'blur'}
                  ]
              }
          };
      },
  methods:{
      //点击关闭按钮执行的函数
      handleClose(){
          this.$refs.ruleForm.resetFields()
          this.offUser()
      },
      //关闭模态框
      offuser(){
          //清空表单
          this.$refs.ruleForm.resetFields()
          //关闭模态框
          this.offUser()
      },
      // 点击确定按钮
      yesUser(){
          //节流阀
          if(this.num1){
              this.num1 = false
              setTimeout(() => {
                  this.num1 = true
              }, 2000);
              this.$refs.ruleForm.validate((valid) => {
              if (valid) {
                  this.$http.put(`users/${this.users.id}`,this.users).then(
                  respose => {//正确请求时执行的代码
                      if (respose.data.meta.status!=200) {//添加失败
                          // console.log(respose.data.meta.status)
                          this.$message({
                          message: '修改失败,'+respose.data.meta.msg,
                          type: 'error',
                          showClose: true,
                          duration:4000
                          })
                      }
                      else{//添加成功
                          console.log(respose.data)
                          this.$message({
                              message: '修改用户成功',
                              type: 'success',
                              duration:2000
                          })
                            // console.log(this.users);
                          this.offuser()
                          this.gethttp()
                      }   
                  },
                  error => {//错误时执行的代码
                      console.log(error.code);
                      this.$message({
                          message: '添加失败'+ error.code,
                          type: 'error',
                          duration:2500
                      })
                  },
                  )
              }
          })
              //
          }  
      },
      //消息提示
      open2() {
          this.$message({
            message: '添加成功',
            type: 'success'
          })
        },
        //数据初始化
        initialize(){
            this.users.id = this.user.id
            this.users.email = this.user.email
            this.users.mobile = this.user.mobile
            this.username = this.user.username
            // console.log('这是update里的user',this.user)
        }
  },
  props:['offUser','updateDialogVisible','gethttp','user']
  }
  </script>
  
  <style>
  
  </style>